import React, { useState } from 'react';
import { Table, Pagination, ConfigProvider } from 'antd';
//导入中文语言包
import zhCN from 'antd/lib/locale/zh_CN';
//样式表
import '../css/Newaftersales.css'
//新增售后弹出框
import Newaftersalessearch2 from './Newaftersalessearch2'

const Newaftersales = () => {
    // 保存当前售后的值
    const [saleNowVal, setSaleNowVal] = useState({})
    // 新增售后2model框
    const [isSaleModel, setIsSaleModel] = useState(false)
    //新增售后弹窗事件
    const inputInformation = (saleVal) => {
        //传出值
        setSaleNowVal(saleVal)
        //判断显示隐藏
        // setIsSaleModel(true)
    }
    const columns = [
        {
            title: '客户名称',
            dataIndex: 'name',
            key: 'name',
            align: 'center',
            render: (name, record) =>  <a onClick={() => { inputInformation(record) }}>{name}</a> 
            // render:<a onClick={inputInformation}></a>
        },
        {
            title: '客户类型',
            dataIndex: 'type',
            key: 'agtypee',
            align: 'center'
        },
        {
            title: '联系人',
            align: 'center',
            dataIndex: 'contacts',
            key: 'contacts'
        },
        {
            title: '手机号码',
            align: 'center',
            dataIndex: 'tel',
            key: 'tel'
        },
        {
            title: 'QQ',
            align: 'center',
            dataIndex: 'qq',
            key: 'qq'
        },
        {
            title: '电子邮箱 ',
            align: 'center',
            dataIndex: 'emil',
            key: 'emil'
        },
        {
            title: '录入时间',
            align: 'center',
            dataIndex: 'input',
            key: 'input'
        },
        {
            title: '最后更新',
            align: 'center',
            dataIndex: 'update',
            key: 'update'
        },
        {
            title: '合同总金额',
            align: 'center',
            dataIndex: 'money',
            key: 'money'
        },
        {
            title: '业务员',
            align: 'center',
            dataIndex: 'sale',
            key: 'sale'
        },

    ];
    const data = [
        {
            key: '1',
            name: '测试',
            type: '有意向',
            contacts: '张三',
            tel: '13926495338',
            qq: '11',
            emil: '13522354@qq.com',
            input: '2022-04-01 09:19',
            update: '1天前',
            money: '10000元',
            sale: '超级管理员',

        },
        {
            key: '2',
            name: '售后',
            type: '没意向',
            contacts: '李四',
            tel: '13526495338',
            qq: '234',
            emil: '43522354@qq.com',
            input: '2022-05-02 07:20',
            update: '3天前',
            money: '20000元',
            sale: '超级管理员',
        },
    ];

    return (
        <div className='body-style'>
            {/* 新增售后2弹窗 */}
            <Newaftersalessearch2
                nowStatus={saleNowVal}
                // {...saleNowVal} 当同时为结构会造成key值不唯一
                isShow={isSaleModel}
                pHandleOk={(res) => { setIsSaleModel(res) }}
                pHandleCancel={(res) => { setIsSaleModel(res) }}>
            </Newaftersalessearch2>
            <Table pagination={false} bordered columns={columns} dataSource={data} />
            <ConfigProvider locale={zhCN} className='page'>
                <Pagination
                    total={60}
                    pageSize={5}
                    showSizeChanger
                    showQuickJumper
                    style={{ textAline: 'center' }}
                    showTotal={total => `共 ${total} 条`}
                />
            </ConfigProvider>

        </div>
    );
}

export default Newaftersales;
